<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>访问属性</title>
    <script>
        function f1(){
            // 获取DOM对象
            let btn = document.getElementById("btn");
            // 通过对象.属性访问对应的DOM属性
            // 取值
            console.log(btn.value);
            console.log(btn.name);
            // 无法获取自定义属性的值
            console.log("自定义a属性的值:"+btn.a);
            // 赋值
            btn.value = "新赋值的按钮";
            // 也可以使用对象["属性名"]的方式进行操作
            // 取值
            console.log(btn["value"]);
            btn["value"]="我又新赋值了";
        }
        function f2(){
            // 获取HTML属性,此时可以获取自定义属性
            // 此时获取到的依然是DOM对象
            let btn = document.getElementById("btn2");
            // 通过对象.getAttribute("属性名")进行取值
            console.log(btn.getAttribute("value"));
            console.log(btn.getAttribute("a"));
            // 通过对象.setAttribute("属性名","属性值")进行赋值
            btn.setAttribute("value","新赋值的按钮");
        }
    </script>
</head>
<body>
<input type="button" value="访问DOM属性" id="btn" name="test" a="b" onclick="f1()"/>
<input type="button" value="访问HTML属性" id="btn2" name="test" a="b" onclick="f2()"/>
</body>
</html>